<template>
  <div class="survey">
    <div class="header flex">
      <div class="selecte-section">
        <div class="selecte-wrap flex">
          <img src="@/assets/images/partment.png" alt class="partment-icon" />
          <div class="selecte-title">行政部门</div>
          <Icon type="md-arrow-dropdown" class="dropdown" size="20" />
        </div>
      </div>
      <div class="right">
        <Button type="warning" class="invite">
          <Icon type="md-globe" />邀请员工完善档案
        </Button>
      </div>
    </div>

    <!-- 信息 -->
    <div class="survey-info-section flex">
      <!-- 左侧 -->
      <div class="info-left info-part">
        <!-- 基础简略信息 -->
        <div class="brief-info flex">
          <div class="info-item">
            <div class="info-title">在职员工</div>
            <div class="info-detail">
              <div class="detail-number">1</div>
              <div class="unit">人</div>
            </div>
          </div>
          <div class="info-item">
            <div class="info-title">已经存档</div>
            <div class="info-detail">
              <div class="detail-number">1</div>
              <div class="unit">人</div>
            </div>
          </div>
          <div class="info-item">
            <div class="info-title">材料</div>
            <div class="info-detail">
              <div class="detail-number">1</div>
              <div class="unit">人</div>
            </div>
          </div>
          <div class="info-item">
            <div class="info-title">占用空间</div>
            <div class="info-detail">
              <div class="detail-number">1</div>
              <div class="unit">B</div>
            </div>
          </div>
        </div>

        <!-- 图表展示 -->
        <div class="chart-info flex">
          <div class="archive-rate chart-rate">
            <i-circle
              :size="196"
              :trail-width="14"
              :stroke-width="14"
              :percent="75"
              stroke-linecap="square"
              stroke-color="#ED3F14"
            >
              <div class="circle-custom">
                <h1 class="rate-num">75%</h1>
                <p clsss="rate-desc">消费人群规模</p>
              </div>
            </i-circle>
          </div>
          <div class="completion-rate chart-rate">
            <i-circle
              :size="196"
              :trail-width="14"
              :stroke-width="14"
              :percent="75"
              stroke-linecap="square"
              stroke-color="#ED3F14"
            >
              <div class="circle-custom">
                <h1 class="rate-num">75%</h1>
                <p clsss="rate-desc">消费人群规模</p>
              </div>
            </i-circle>
          </div>
        </div>

        <!-- 详情 -->
        <div class="detail-section">
          <div class="section-header flex">
            <div class="header-left">
              <div class="left-title">员工重要信息完整率17%</div>
              <div class="left-desc">补充员工重要信息可以提升信息完整率，降低用工风险</div>
            </div>
            <!-- <div class="header-rgiht">
              <Button type="success">补充员工信息</Button>
            </div> -->
          </div>
          <div class="section-list">
            <div class="list-item flex">
              <div class="item-title flex">
                <div class="title-text">身份证原件</div>
                <Tooltip content="用于缴纳社保、查询个人身份真伪等" placement="right">
                  <Icon type="md-help-circle" size="18" />
                </Tooltip>
              </div>
              <div class="item-progress">
                <Progress :percent="100" :stroke-width="5" stroke-color="#04AF71" />
              </div>
              <div class="item-action">去上传</div>
            </div>
            <div class="list-item flex">
              <div class="item-title flex">
                <div class="title-text">居住地址</div>
                <Tooltip content="用于寄收紧急重要文件，如社保卡、解除劳动合同协议书等" placement="right">
                  <Icon type="md-help-circle" size="18" />
                </Tooltip>
              </div>
              <div class="item-progress">
                <Progress :percent="39" :stroke-width="5" stroke-color="#04AF71" />
              </div>
              <div class="item-action">去上传</div>
            </div>
            <div class="list-item flex">
              <div class="item-title flex">
                <div class="title-text">紧急联系人</div>
                <Tooltip content="用于紧急情况下联系员工提供的特殊关系人" placement="right">
                  <Icon type="md-help-circle" size="18" />
                </Tooltip>
              </div>
              <div class="item-progress">
                <Progress :percent="37" :stroke-width="5" stroke-color="#04AF71" />
              </div>
              <div class="item-action">去上传</div>
            </div>
            <div class="list-item flex">
              <div class="item-title flex">
                <div class="title-text">社保账号</div>
                <Tooltip content="用于缴纳社保" placement="right">
                  <Icon type="md-help-circle" size="18" />
                </Tooltip>
              </div>
              <div class="item-progress">
                <Progress :percent="80" :stroke-width="5" stroke-color="#04AF71" />
              </div>
              <div class="item-action">去上传</div>
            </div>
            <div class="list-item flex">
              <div class="item-title flex">
                <div class="title-text">社保账号</div>
                <Tooltip content="用于缴纳社保" placement="right">
                  <Icon type="md-help-circle" size="18" />
                </Tooltip>
              </div>
              <div class="item-progress">
                <Progress :percent="50" :stroke-width="5" stroke-color="#04AF71" />
              </div>
              <div class="item-action">去上传</div>
            </div>
            <div class="list-item flex">
              <div class="item-title flex">
                <div class="title-text">社保账号</div>
                <Tooltip content="用于缴纳社保" placement="right">
                  <Icon type="md-help-circle" size="18" />
                </Tooltip>
              </div>
              <div class="item-progress">
                <Progress :percent="30" :stroke-width="5" stroke-color="#04AF71" />
              </div>
              <div class="item-action">去上传</div>
            </div>
          </div>
        </div>
      </div>
      <!-- 右侧 -->
      <div class="info-right info-part">
        <!-- 基础简略信息 -->
        <div class="brief-info flex">
          <div class="info-item">
            <div class="info-title">在职员工</div>
            <div class="info-detail">
              <div class="detail-number">1</div>
              <div class="unit">人</div>
            </div>
          </div>
          <div class="info-item">
            <div class="info-title">已经存档</div>
            <div class="info-detail">
              <div class="detail-number">1</div>
              <div class="unit">人</div>
            </div>
          </div>
          <div class="info-item">
            <div class="info-title">材料</div>
            <div class="info-detail">
              <div class="detail-number">1</div>
              <div class="unit">人</div>
            </div>
          </div>
          <div class="info-item">
            <div class="info-title">占用空间</div>
            <div class="info-detail">
              <div class="detail-number">1</div>
              <div class="unit">B</div>
            </div>
          </div>
        </div>

        <!-- 图表展示 -->
        <div class="chart-info">
          <div class="archive-rate chart-rate">
            <i-circle
              :size="196"
              :trail-width="14"
              :stroke-width="14"
              :percent="75"
              stroke-linecap="square"
              stroke-color="#ED3F14"
            >
              <div class="circle-custom">
                <h1 class="rate-num">75%</h1>
                <p clsss="rate-desc">消费人群规模</p>
              </div>
            </i-circle>
          </div>
        </div>

        <!-- 详情 -->
        <div class="detail-section">
          <div class="section-header flex">
            <div class="header-left">
              <div class="left-title">员工重要信息完整率17%</div>
              <div class="left-desc">补充员工重要信息可以提升信息完整率，降低用工风险</div>
            </div>
            <div class="header-rgiht">
              <Button type="success" class="replenish-info-btn">批量补充员工信息</Button>
            </div>
          </div>
          <div class="section-list">
            <div class="list-item flex">
              <div class="item-title flex">
                <div class="title-text">身份证原件</div>
                <Tooltip content="Top Left text" placement="right">
                    <Icon type="md-help-circle" size="18"/>
                </Tooltip>
              </div>
              <div class="item-progress">
                <Progress :percent="70" :stroke-width="5" stroke-color="#04AF71" />
              </div>
              <div class="item-action">去上传</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "survey"
};
</script>
<style lang="scss" src = "./survey.scss" scoped>
</style>